<template>
    <div class="page_root" data-page-name="测试测试测试" data-page-identification="k_lxjqlzhckl">
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!-- begin vid_3fz4l48dfx 自定义模板_l6i8wduj7z -->
            <a-row class="main" :gutter="16">
                <a-col :span="4">
                    <div class="left-tree">
                        <div class="search-input">
                            <a-input-search
                                v-model:value="state.searchValue"
                                style="margin-bottom: 8px"
                                placeholder="请输入项目名称"
                                @change="getTreeDate"
                            />
                        </div>
                        <a-tree :tree-data="state.treeData" :fieldNames="fieldNames" />
                    </div>
                </a-col>
                <a-col :span="20">
                    <div class="right-content">
                        <div class="top-search">
                            <a-form :model="searchModel">
                                <a-row :gutter="24">
                                    <a-col :span="6">
                                        <a-form-item label="日期选择">
                                            <a-date-picker
                                                style="width: 100%"
                                                v-model:value="state.searchModel.date"
                                                valueFormat="YYYY-MM"
                                                format="YYYY-MM"
                                                picker="month"
                                            />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="3">
                                        <a-form-item label="周">
                                            <a-select
                                                v-model:value="state.searchModel.week"
                                                :options="state.weeksList"
                                                @focus="getDateWeek"
                                            />
                                        </a-form-item>
                                    </a-col>
                                    <a-col>
                                        <a-space size="large">
                                            <a-button type="primary" @click="handlerGetTableData">查询</a-button>
                                            <a-button @click="resetTableData">重置</a-button>
                                        </a-space>
                                    </a-col>
                                </a-row></a-form
                            >
                        </div>
                        <div class="bottom-content">
                            <div class="table-form-box">
                                <span> 工时进展列表</span>
                                <a-button type="primary" ghost @click="handleAddWork">新建工作进展</a-button>
                            </div>
                            <a-table :columns="tableColumns" :dataSource="tableDataSource">
                                <template #bodyCell="{ column, record, text }">
                                    <template v-if="column.dataIndex === 'operation'">
                                        <a-space>
                                            <a-button type="link" @click="handlerEdit(record)">编辑</a-button>
                                            <a-popconfirm
                                                title="确定要删除吗？"
                                                :disabled="record.disabledDelBtn"
                                                @confirm="handlerDelete(record)"
                                            >
                                                <a-button type="link">删除</a-button>
                                            </a-popconfirm>
                                        </a-space>
                                    </template>
                                </template>
                            </a-table>
                        </div>
                    </div>
                </a-col>
            </a-row>
            <a-modal
                v-model:visible="state.modalVisible"
                :title="state.title"
                width="800px"
                @ok="handleConfirm"
                destroyOnClose
                okText="保存"
            >
                <a-form :model="state.addOrEditModel" ref="formRef">
                    <a-row :gutter="24">
                        <a-col :span="12">
                            <a-form-item
                                label="项目/技术负责人"
                                :rules="[{ required: true, message: '请选择项目负责人或技术负责人', trigger: 'blur' }]"
                                name="plName"
                            >
                                <a-select
                                    v-model:value="state.addOrEditModel.plName"
                                    placeholder="请选择项目负责人或技术负责人"
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item
                                label="项目/产品经理"
                                :rules="[{ required: true, message: '请选择项目经理或产品经理', trigger: 'blur' }]"
                                name="pmName"
                            >
                                <a-select
                                    v-model:value="state.addOrEditModel.pmName"
                                    placeholder="请选择项目经理或产品经理"
                                />
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row :gutter="24">
                        <a-col :span="24" style="padding-left: 32px">
                            <a-form-item
                                label="本周进展简述"
                                :rules="[{ required: true, message: '请输入本周进展简述。', trigger: 'blur' }]"
                                name="content"
                            >
                                <a-textarea
                                    style="width: 100%"
                                    v-model:value="state.addOrEditModel.content"
                                    placeholder="请输入本周进展简述。"
                                    show-count
                                    :rows="4"
                                    :maxlength="400"
                                />
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
            </a-modal>
            <!-- end vid_3fz4l48dfx 自定义模板_l6i8wduj7z -->
        </a-spin>
    </div>
</template>
<script setup>
    import {
        h,
        ref,
        reactive,
        toRaw,
        markRaw,
        watch,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated
    } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    const router = useRouter()
    const route = useRoute()
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
    import {
        cloneDeep,
        localGet,
        merge,
        getDifferenceArray,
        traversalTreeStructure,
        checkCaseCondition,
        renderStringInTemplate,
        handleBreadcrumbJump,
        throttle
    } from '@/utils/index'
    //   import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is';
    import dayjs from 'dayjs'
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
    import { message, notification, Modal } from 'ant-design-vue'
    import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate } from '@/utils/format'
    /*** PUBLISH_EXEGESIS ***
import UserTableRecords from '@/model/UserTableRecords';
import { getAppBaseUrl } from '@/utils/index';
import { sendToken } from "@/hooks/useIframeToken";
*** PUBLISH_EXEGESIS ***/

    /* -------------------------- 属性定义 -------------------------- */
    const pageLoading = reactive({
        loading: false,
        tip: undefined
    })
    const authInfo = localGet('app-user-store')

    // ================================定制化逻辑========================================
    onMounted(() => {
        getTreeDate()
    })
    const fieldNames = {
        children: 'children',
        title: 'projectName',
        Key: 'projectId'
    }

    const state = reactive({
        treeData: [],
        searchValue: '',
        tableDataSource: [],
        searchModel: {
            date: '',
            week: ''
        },
        weeksList: [],
        modalVisible: false,
        title: '新建工作进展',
        addOrEditModel: {
            plName: '',
            pmNameL: '',
            content: ''
        }
    })
    const formRef = ref(null)
    const tableColumns = [
        {
            title: '提交月份'
        },
        {
            title: '提交周'
        },
        {
            title: '本月总目标'
        },
        {
            title: '本周进展简述',
            dataIndex: 'content'
        },
        {
            title: '创建人'
        },
        {
            title: '创建时间'
        },
        {
            title: '最近修改人'
        },
        {
            title: '最近修改时间'
        },
        {
            title: '操作',
            dataIndex: 'operation'
        }
    ]
    function getTreeDate() {
        const params = {
            projectName: state.searchValue
        }
        post('/solution-ppm/api/v2/built-in-system-ppm/delivery_project/tree/projectList', params).then(data => {
            state.treeData = data.data
        })
    }
    function getDateWeek() {
        const params = {
            dateOption: state.searchModel.date
        }
        post('/solution-ppm/api/v2//built-in-system-ppm/weekly/month-week', params).then(({ data }) => {
            state.weeksList = data
        })
    }
    function handleAddWork() {
        state.modalVisible = true
    }
    function handleConfirm() {
        formRef.value.validate().then(() => {})
    }
</script>
<style lang="less" scoped>
    .page_root {
        width: 100%;
        height: 100%;
        overflow: auto;
    }

    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container) {
        height: 100%;
    }

    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }

    .page_root :deep(.@{ant-prefix}-table) {
        flex: auto;
        overflow: auto;
    }

    .table-moreBtn_down {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
        background: #ebf1ff;
    }

    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
        z-index: 1;
    }

    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 15px !important;
        width: calc(100% - 15px);
    }

    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 30px !important;
        width: calc(100% - 30px);
    }

    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 45px !important;
        width: calc(100% - 45px);
    }

    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 60px !important;
        width: calc(100% - 60px);
    }

    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-list) {
        height: 100%;
        width: 50%;
    }

    .main {
        background-color: #f0f2f5;
        height: 100%;
    }

    .left-tree {
        background-color: #fff;
        height: calc(100vh - 112px);
        padding: 20px 5px 0 5px;
        overflow: auto;
    }

    .right-content {
        background-color: #f0f2f5;
        height: calc(100vh - 112px);
    }

    .search-input {
        width: 90%;
        margin: 0 auto;
    }

    .page_root {
        overflow: hidden;
    }

    .top-search {
        background-color: #fff;
        height: 65px;
        margin-bottom: 16px;
        padding: 16px;
    }

    .bottom-content {
        background-color: #fff;
        height: calc(100vh - 180px);
        padding: 16px;
    }

    .table-form-box {
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .table-form-box > span {
        padding-left: 8px;
        line-height: 16px;
        font-weight: 600;
        font-size: 16px;
        border-left-style: solid;
        border-left-width: 4px;
        border-left-color: #3875ff;
    }

    /deep/ .ant3-table-tbody td {
        padding: 0 16px;
    }

    /deep/ .ant3-table-thead tr th {
        background-color: #3875ff;
        color: #fff;
        font-weight: 600;
        padding: 8px 20px;
    }

    :global(.ant3-modal-footer) {
        text-align: center;
    }
</style>
